
<script>
import { Toast } from "vant";
import { useBookread } from "../../stores/bookread";
import { computed, ref, onBeforeUpdate } from "vue";
export default {
  setup() {
    // 状态中心
    const bookreadStore = useBookread();
    // console.log(bookreadStore);

    // 字体大全
    const columns = [
      "cursive",
      "'Hiragino Sans GB'",
      "'Microsoft Yahei'",
      "'微软雅黑'",
      "Arial",
      "sans-serif",
      "Tahoma",
      "Helvetica",
      "'黑体'",
      "'宋体'",
    ];

    let userinfo = JSON.parse(localStorage.getItem("userinfo")); //用户信息
    let fristEnter = ref(false); //首次进入 默认否
    if (!userinfo.bookcase) fristEnter.value = true; // 用户信息里有书架信息

    // 首次进入 点击方法 让其隐藏
    let fristEnterCencalFun = () => {
      // 修改状态
      fristEnter.value = false;
    };

    //点击显示目录和标签
    let showDirectoryMarkFun = () => {
      bookreadStore.closeAll(); // 关闭所有弹窗
      bookreadStore.$patch({
        directoryMark: true,
        directoryMarkType: "directory",
      }); // 修改状态 显示目录标签
    };

    //点击显示调节
    let showAdjustkFun = () => {
      bookreadStore.closeAll(); // 关闭所有弹窗
      bookreadStore.$patch({ adjust: true }); // 修改状态 显示目录标签
    };

    //点击显示更多
    let showInfoFunsFun = () => {
      bookreadStore.closeAll(); // 关闭所有弹窗
      bookreadStore.$patch({ infoFuns: true }); // 修改状态 显示目录标签
    };

    //点击显示选择字体的弹窗
    let showFontPopFun = () => {
      bookreadStore.closeAll(); // 关闭所有弹窗
      bookreadStore.$patch({ fontPop: true }); // 修改状态 显示目录标签
    };

    // 字体样式取消事件
    const onCancel = () => {
      bookreadStore.closeAll();
    };

    // 字体样式确认事件
    const onConfirm = (value) => {
      bookreadStore.family = value;
      bookreadStore.closeAll();
      Toast("您的字体切换成:\n" + value);
    };

    // 亮度改变事件
    const onChange = (value) => Toast("当前亮度：" + value);

    //字体设置
    let A_set = (val) => {
      bookreadStore.setSize(val);
    };

    //行高设置
    let L_set = (val) => {
      bookreadStore.setSpace(val);
    };

    //跳章节方法
    let goPage = (val, e, flag) => {
      bookreadStore.goPage(val, e, flag);
    };

    //跳标签方法
    let goMark = (val, e) => {
      bookreadStore.goMark(val, e);
    };

    // 分享配置
    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];

    // 添加书签
    let addMark = () => {
      bookreadStore.addMark();
    };

    //显示标签列表弹窗
    let showMarkListPop = () => {
      bookreadStore.closeAll();
      bookreadStore.$patch({ directoryMark: true, directoryMarkType: "mark" });
    };

    // 评分弹窗
    const ratePop = ref(false);

    // 显示评分弹窗方法
    const showratePop = () => {
      ratePop.value = true;
    };

    // 提交投票方法
    let subRateFun = () => {
      if (bookreadStore.rateFreeFlag) return;

      if (!bookreadStore.rateFreeValue || !bookreadStore.rateMoneyValue)
        return Toast("请检查您的投票");

      Toast.loading({
        duration: 500,
        forbidClick: true,
        message: "请稍等",
        onOpened: () => {
          Toast("提交成功\n感谢您的支持");
        },
      });

      // 修改只读标志位
      bookreadStore.$patch({ rateFreeFlag: true });

      // 隐藏评分弹窗
      ratePop.value = false;
    };

    //下载后续已购章节
    let downloadFun1 = () => {
      bookreadStore.downloadFun1();
    };

    // 多选框切花事件
    const checked = ref([]);

    // 多选框选中了的数组
    const checkboxRefs = ref([]);

    // 多选框原生对象数组
    const toggle = (index) => {
      checkboxRefs.value[index].toggle();
    };

    // 确认按钮触发
    let downloadConfirmEve = () => {
      bookreadStore.downloadFun2(checked.value);
    };

    // 订阅下载
    let singleDownloadFun = () => {
      bookreadStore.downloadFun1();
    };

    // 删除标签方法
    let delMarkFun = (current) => {
      bookreadStore.delMarkFun(current);
    };

    // 切换喜欢的方法
    let toggleLikeFun = (id) => {
      bookreadStore.toggleLikeFun(id);
    };

    // 输入框文本
    let hotText = ref("");

    // 添加评论方法
    let addCommentFun = () => {
      bookreadStore.addComment(hotText.value);
      hotText.value = "";
    };

    // 显示评论弹窗
    let showCommentPop = () => {
      bookreadStore.closeAll();
      bookreadStore.$patch({ CommentPopFlag: true });
    };

    // 更新前
    onBeforeUpdate(() => {
      checkboxRefs.value = [];
      // 把所有的选项框选中
      checked.value = bookreadStore.tobeDownloadList;
    });

    return {
      showCommentPop, // 显示评论弹窗
      hotText, //输入框文本
      addCommentFun, //添加评论
      toggleLikeFun, //切换喜欢方法
      // 评论弹窗方法
      CommentPopFlag: computed({
        get: () => bookreadStore.CommentPopFlag,
        set: (v) => (bookreadStore.CommentPopFlag = v),
      }),
      // 当前章节内容
      contentObj: computed(() => {
        if (!bookreadStore.book.list.length) return [];
        // console.log(bookreadStore.book.list[bookreadStore.current]);
        let res = {};
        let index = bookreadStore.ModifyList.findIndex(
          (item) =>
            item.title == bookreadStore.book.list[bookreadStore.current].title
        );
        if (index != -1) res = bookreadStore.ModifyList[index];
        else res = bookreadStore.book.list[bookreadStore.current];
        return res;
      }),
      delMarkFun, // 删除标签方法
      payList: computed(() => bookreadStore.payList),
      singleDownloadFun, //订阅下载
      downloadList: computed(() => bookreadStore.downloadList), // 已下载列表

      downloadConfirmEve, // 确认按钮触发

      list: computed(() => bookreadStore.tobeDownloadList), //需要下载的章节数组
      toggle, // 多选框切花事件
      checked, // 多选框选中了的数组
      checkboxRefs, // 多选框原生对象数组

      // 下载清单弹窗
      downloadDialogFlag: computed({
        get: () => bookreadStore.downloadDialogFlag,
        set: (v) => (bookreadStore.downloadDialogFlag = v),
      }),
      downloadFun1, //下载后续已购章节
      historyList: computed(() => bookreadStore.historyList),
      ratePop, //评分弹窗
      showratePop, //评分弹窗方法
      // 评分值 免费评价
      rateFreeValue: computed({
        get: () => bookreadStore.rateFreeValue,
        set: (v) => (bookreadStore.rateFreeValue = v),
      }),
      // 免费评价 仅读标识
      rateFreeFlag: computed({
        get: () => bookreadStore.rateFreeFlag,
        set: (v) => (bookreadStore.rateFreeFlag = v),
      }),
      // 评分值 收费评价
      rateMoneyValue: computed({
        get: () => bookreadStore.rateMoneyValue,
        set: (v) => (bookreadStore.rateMoneyValue = v),
      }),
      subRateFun, // 提交投票方法

      goMark, //转到标签
      addMark, // 添加书签
      showMarkListPop, //显示标签列表弹窗
      showShare, //分享配置
      options, //分享配置

      A_set, //字体设置
      L_set, //行高设置
      fristEnter, //首次进入
      fristEnterCencalFun, // 首次进入点击

      columns, //字体数组
      onConfirm, //字体设置 选择字体 确认按钮
      onCancel, //字体设置 选择字体 取消按钮

      onChange, //亮度改变

      showDirectoryMarkFun, //点击显示目录和标签
      showAdjustkFun, //点击显示调节
      showInfoFunsFun, //点击显示更多
      showFontPopFun, //点击显示选择字体的弹窗

      // 主控制台弹窗
      control_main: computed({
        get: () => bookreadStore.main,
        set: (v) => {
          bookreadStore.main = v;
        },
      }),
      // 目录与书签弹窗
      control_directoryMark: computed({
        get: () => bookreadStore.directoryMark,
        set: (v) => {
          bookreadStore.directoryMark = v;
        },
      }),
      // 调整字体弹窗
      control_adjust: computed({
        get: () => bookreadStore.adjust,
        set: (v) => {
          bookreadStore.adjust = v;
        },
      }),
      // 调整字体细节弹窗
      control_infoFuns: computed({
        get: () => bookreadStore.infoFuns,
        set: (v) => {
          bookreadStore.infoFuns = v;
        },
      }),
      // 自动订阅开关
      control_autoSubscribeChecked: computed({
        get: () => bookreadStore.autoSubscribeChecked,
        set: (v) => {
          bookreadStore.autoSubscribeChecked = v;
        },
      }),
      // 字体样式弹窗
      control_fontPop: computed({
        get: () => bookreadStore.fontPop,
        set: (v) => {
          bookreadStore.fontPop = v;
        },
      }),
      // 亮度滑块控制
      brightValue: computed({
        get: () => bookreadStore.brightValue,
        set: (v) => {
          bookreadStore.brightValue = v;
        },
      }),
      // 主题控制
      control_theme: computed({
        get: () => bookreadStore.theme,
        set: (v) => {
          // 不要重复修改
          if (v == bookreadStore.theme) return;
          // 下标切换
          bookreadStore.theme = v;
          // 切换时把主体换掉
          console.log(v);
          switch (v) {
            case "white":
              bookreadStore.$patch({
                hsObj: { bgColor: { h: 228, s: 16 }, color: { h: 0, s: 0 } },
                brightValue: 94,
              });
              break;
            case "yellow":
              bookreadStore.$patch({
                hsObj: { bgColor: { h: 37, s: 62 }, color: { h: 0, s: 0 } },
                brightValue: 77,
              });
              break;
            case "red":
              bookreadStore.$patch({
                hsObj: { bgColor: { h: 351, s: 100 }, color: { h: 0, s: 0 } },
                brightValue: 85,
              });
              break;
            case "green":
              bookreadStore.$patch({
                hsObj: { bgColor: { h: 138, s: 52 }, color: { h: 0, s: 0 } },
                brightValue: 81,
              });
              break;
            case "grey":
              bookreadStore.$patch({
                hsObj: { bgColor: { h: 10, s: 15 }, color: { h: 37, s: 62 } },
                brightValue: 25,
              });
              break;

            default:
              break;
          }
        },
      }),
      // 滚轮比值
      scrollRatio: computed(() => bookreadStore.scrollRatio),
      // 目录列表
      directoryList: computed(() => {
        if (bookreadStore.isReverse) return bookreadStore.book.reverseList;
        else return bookreadStore.book.list;
      }),
      goPage, //跳章节方法
      book: computed(() => bookreadStore.book), // 全书本数据
      current: computed(() => bookreadStore.current), //看到的章节
      // 是否反转目录
      isReverse: computed({
        get: () => bookreadStore.isReverse,
        set: (val) => (bookreadStore.isReverse = val),
      }),
      // 标签列表
      markList: computed(() => bookreadStore.markList),
      // 目录标签显示类型
      directoryMarkType: computed({
        get: () => bookreadStore.directoryMarkType,
        set: (v) => (bookreadStore.directoryMarkType = v),
      }),
    };
  },
};
</script>


<template>
  <div class="BookControl">
    <!-- 点击范围 -->
    <div class="click-able" v-if="fristEnter" @click.stop="fristEnterCencalFun">
      <div class="left">上一章</div>
      <div class="middle">打开控制中心</div>
      <div class="right">下一章</div>
    </div>

    <!-- control -->
    <van-popup
      class="control"
      v-model:show="control_main"
      position="bottom"
      @click.stop=""
    >
      <div class="left">
        <div class="bright">
          <van-slider
            class="my-slider"
            v-model="brightValue"
            vertical
            @change="onChange"
            reverse
          />
        </div>
        <div class="night">
          <span class="iconfont icon-moonyueliang"></span>
        </div>
        <div class="day">
          <span class="iconfont icon-KJ_041"></span>
        </div>
      </div>

      <div class="right">
        <div class="progre">
          <div class="progre-bg" :style="`width:${scrollRatio * 100}%;`"></div>
          <div class="prev" @click="goPage(-1, $event)">
            <span class="iconfont icon-xiangzuo1"></span>
          </div>
          <div class="text">
            <div class="chapter-name text-ellipsis-1">
              {{ book.list[current].title }}
            </div>
            <div class="percent">{{ (scrollRatio * 100).toFixed(1) }}%</div>
          </div>
          <div class="next" @click="goPage(1, $event)">
            <span class="iconfont icon-xiangyou1"></span>
          </div>
        </div>
        <div class="btns">
          <button class="directory" @click="showDirectoryMarkFun">
            <span class="iconfont icon-wuxupailie"></span>
            <span class="name">目录</span>
          </button>
          <button class="adjust" @click="showAdjustkFun">
            <span class="iconfont icon-Aa"></span>
            <span class="name">调节</span>
          </button>
          <button class="subscribe" @click="singleDownloadFun">
            <span
              class="
                iconfont
                icon-cangpeitubiao_xiazaipandiandanxiazaidayinmoban
              "
            ></span>
            <span class="name">订阅</span>
          </button>
          <button class="more" @click="showInfoFunsFun">
            <span class="iconfont icon-xiaoxi"></span>
            <span class="name">更多</span>
          </button>
        </div>
      </div>
    </van-popup>

    <!-- directoryMark -->
    <van-popup
      class="directoryMark"
      v-model:show="control_directoryMark"
      position="left"
    >
      <div class="title">
        <span
          :class="{ con: directoryMarkType == 'directory' }"
          @click="directoryMarkType = 'directory'"
          >目录</span
        >
        <span
          :class="{ con: directoryMarkType == 'mark' }"
          @click="directoryMarkType = 'mark'"
          >书签</span
        >
      </div>

      <div
        class="status-chapter-type"
        v-show="directoryMarkType == 'directory'"
      >
        <div class="status-chapter">
          连载中 本书共{{ directoryList.length }}小结
        </div>
        <div class="type" @click="isReverse = !isReverse">
          <span class="iconfont icon-paixu3"></span>
          {{ isReverse ? "正序" : "倒序" }}
        </div>
      </div>

      <div class="directoryList" v-show="directoryMarkType == 'directory'">
        <div class="directoryList-box">
          <div
            :class="[
              'item',
              {
                downloaded: downloadList.some((title) => title == item.title),
              },
              {
                seem: isReverse
                  ? historyList.some(
                      (item) => index == directoryList.length - 1 - item.current
                    )
                  : historyList.some((item) => index == item.current),
              },
              {
                prev: control_autoSubscribeChecked
                  ? isReverse
                    ? index == directoryList.length - 1 - current + 1
                    : index == current - 1
                  : false,
              },
              {
                next: control_autoSubscribeChecked
                  ? isReverse
                    ? index == directoryList.length - 1 - current - 1
                    : index == current + 1
                  : false,
              },
              {
                lock:
                  item.isLock && !payList.some((title) => title == item.title),
              },
              {
                looking: isReverse
                  ? index == directoryList.length - 1 - current
                  : index == current,
              },
            ]"
            v-for="(item, index) in directoryList"
            :key="index"
            @click="
              goPage(
                isReverse ? directoryList.length - 1 - index : index,
                $event,
                true
              )
            "
          >
            <p>
              <van-icon name="success" /><van-icon name="down" />
              <span>{{ item.title }}</span>
            </p>
            <strong class="iconfont icon-jiesuo"></strong>
          </div>
        </div>
      </div>

      <div class="markList" v-show="directoryMarkType == 'mark'">
        <div
          :class="['item', 'random' + (index % 7)]"
          v-for="(item, index) in markList"
          :key="index"
          @click="goMark(index, $event)"
        >
          <van-swipe-cell>
            <div class="title">
              <div class="name text-ellipsis-1">
                {{
                  book.list.length ? book.list[item.current].title : "加载中"
                }}
              </div>
              <div class="scrollRatio">
                {{ (item.scrollRatio * 100).toFixed(1) }}%
              </div>
            </div>
            <div class="keyword text-ellipsis-7">{{ item.keyword }}</div>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="delMarkFun(item.current)"
              />
            </template>
          </van-swipe-cell>
        </div>

        <div
          :class="['item', 'random' + parseInt(Math.random() * 8)]"
          v-if="!markList.length"
          @click="control_directoryMark = false"
        >
          <div class="title">
            <div class="name">这里空空的</div>
            <div class="scrollRatio"></div>
          </div>
          <div class="keyword text-ellipsis-7">快去添加标签吧</div>
        </div>
      </div>

      <button
        class="download"
        v-show="directoryMarkType == 'directory'"
        @click="downloadFun1"
      >
        下载后续已购章节
      </button>
    </van-popup>

    <!-- adjust -->
    <van-popup
      class="adjust-pop"
      v-model:show="control_adjust"
      position="bottom"
      ><div class="theme-list">
        <div
          :class="['item', 'white', { con: control_theme == 'white' }]"
          @click="control_theme = 'white'"
        >
          纯白
        </div>
        <div
          :class="['item', 'yellow', { con: control_theme == 'yellow' }]"
          @click="control_theme = 'yellow'"
        >
          怀旧
        </div>
        <div
          :class="['item', 'red', { con: control_theme == 'red' }]"
          @click="control_theme = 'red'"
        >
          玫瑰
        </div>
        <div
          :class="['item', 'green', { con: control_theme == 'green' }]"
          @click="control_theme = 'green'"
        >
          芳草
        </div>
        <div
          :class="['item', 'grey', { con: control_theme == 'grey' }]"
          @click="control_theme = 'grey'"
        >
          夜晚
        </div>
      </div>
      <div class="four-btns">
        <div class="size">
          <button class="add" @click="A_set(1)">A+</button>
          <button class="sub" @click="A_set(-1)">A-</button>
        </div>

        <div class="line">
          <button class="add" @click="L_set(1)">L+</button>
          <button class="sub" @click="L_set(-1)">L-</button>
        </div>
      </div>
      <div class="two-options">
        <button @click="showFontPopFun">字体设置</button>
        <button>翻页模式</button>
      </div>
    </van-popup>

    <!-- info-funs -->
    <van-popup
      class="info-funs"
      v-model:show="control_infoFuns"
      position="bottom"
    >
      <div class="book-info">
        <div class="img">
          <div class="img-box">
            <img :src="book.BookImage" alt="" />
          </div>
        </div>
        <div class="text">
          <div class="book-name text-ellipsis-1">{{ book.BookName }}</div>
          <div class="name text-ellipsis-1">{{ book.Author }}</div>
        </div>
      </div>
      <div class="btn-list">
        <div class="item" @click="showCommentPop">
          <div class="left">
            <span class="iconfont icon-bianji"></span>
            <p>句评</p>
          </div>

          <div class="right">
            <small
              >本章共{{ contentObj.commentList.length }}条书评</small
            >
            <span class="iconfont icon-xiangyou1"></span>
          </div>
        </div>
        <div class="item">
          <div class="left">
            <span class="iconfont icon-24gl-playCircle"></span>
            <p>自动订阅下一章</p>
          </div>

          <div class="right">
            <van-switch v-model="control_autoSubscribeChecked" />
          </div>
        </div>
        <div class="item">
          <div class="left" @click="addMark">
            <span class="van-icon van-icon-label-o"></span>
            <p>添加书签</p>
          </div>

          <div class="right" @click="showMarkListPop">
            <small v-if="!markList.length">暂无标签</small>
            <small v-if="markList.length">共{{ markList.length }}个书签</small>
            <span class="iconfont icon-xiangyou1"></span>
          </div>
        </div>
        <div class="item" @click="showratePop">
          <div class="left">
            <span class="iconfont icon-toupiao"></span>
            <p>投票</p>
          </div>

          <div class="right">
            <span class="iconfont icon-xiangyou1"></span>
          </div>
        </div>
        <div
          class="item"
          @click="(showShare = true), (control_infoFuns = false)"
        >
          <div class="left">
            <span class="iconfont icon-zhuanfa_4"></span>
            <p>分享</p>
          </div>

          <div class="right">
            <span class="iconfont icon-xiangyou1"></span>
          </div>
        </div>
        <div class="item">
          <div class="left">
            <span class="iconfont icon-sousuo"></span>
            <p>全文搜索</p>
          </div>

          <div class="right">
            <span class="iconfont icon-xiangyou1"></span>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- font -->
    <van-popup class="font" v-model:show="control_fontPop" position="bottom">
      <van-picker
        title="字体设置"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>

    <!-- 分享 -->
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
    />

    <!-- 评分 -->
    <van-popup class="rote" v-model:show="ratePop" round>
      <h1>给Ta投票</h1>
      <div class="book-info">
        <div class="left">
          <div class="img"><img :src="book.BookImage" alt="" /></div>
        </div>
        <div class="right">
          <p class="text-ellipsis-6">{{ book.describe }}</p>
        </div>
      </div>
      <h2>
        {{ book.BookName }} <span>--{{ book.Author }}</span>
      </h2>

      <div class="book-rote">
        <div class="item">
          <p>免费 <small>(只能一次)</small></p>
          <van-rate
            class="iconfont"
            icon-prefix="icon"
            void-icon="wodepinglun"
            icon="wodepinglun"
            v-model="rateFreeValue"
            :readonly="rateFreeFlag"
          />
        </div>
        <div class="item">
          <p>投票 <small>(只能一次)</small></p>
          <van-rate
            class="iconfont"
            icon-prefix="icon"
            void-icon="wodepinglun"
            icon="wodepinglun"
            v-model="rateMoneyValue"
            :readonly="rateFreeFlag"
          />
        </div>
        <div class="some">注：<span>1张票 = 10豆</span></div>
      </div>

      <div class="btn">
        <button class="cencal" @click="ratePop = false">取消</button>
        <button :class="['sub', { con: rateFreeFlag }]" @click="subRateFun">
          确定
        </button>
      </div>
    </van-popup>

    <!-- 下载弹窗 -->
    <van-dialog
      class="downloadDialog"
      v-model:show="downloadDialogFlag"
      title="下载清单"
      show-cancel-button
      @confirm="downloadConfirmEve"
      :show-confirm-button="Boolean(list.length)"
    >
      <van-checkbox-group v-model="checked">
        <van-cell-group inset>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="item"
            :title="item"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox
                :name="item"
                :ref="(el) => (checkboxRefs[index] = el)"
                @click.stop
                :v-model="true"
              />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>

      <div class="emtpy" v-show="!list.length">
        <p>从您阅读位置往下</p>
        <p><small>暂无最新内容</small> 或 <small>暂无已解锁章节</small></p>
      </div>
    </van-dialog>

    <!-- 评论弹窗 -->
    <van-popup class="comment-pop" v-model:show="CommentPopFlag">
      <div class="comment-box">
        <div class="head">
          <h1>{{ contentObj.title }}</h1>
          <p><small>--章节评论</small></p>
        </div>
        <div class="body">
          <div
            :class="['item', { me: item.user.id == 'billkes' }]"
            v-for="item in contentObj.commentList"
            :key="item.id"
          >
            <div class="icon-name">
              <div class="box">
                <div class="icon"><img :src="item.user.avatar" alt="" /></div>
                <div class="name">
                  <span>{{ item.user.nickname }}</span>
                </div>
              </div>
              <div
                :class="['like', { liked: item.my_like }]"
                @click="toggleLikeFun(item.id)"
              >
                <span>{{ item.like_count }}</span
                ><van-icon name="good-job-o" />
              </div>
            </div>
            <div class="text">
              {{ item.content }}
            </div>
          </div>
        </div>
        <div class="foot">
          <div class="edit">
            <input type="text" placeholder="输入热文" v-model="hotText" />
            <button @click="addCommentFun">分享</button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>


<style lang="scss" scoped>
.BookControl {
  .click-able {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;

    .left,
    .middle,
    .right {
      flex: 1;
      border-radius: 8px;
      border: 4px dashed #82828e;
      margin: 5px;
      font-size: 25px;
      color: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(132, 131, 142, 0.5);
      padding: 1em;
    }
  }

  ::v-deep .control {
    height: 227px;
    padding: 27px 19px 37px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left {
      height: 163px;
      width: 61px;
      border-radius: 19px;
      overflow: hidden;
      position: relative;
      .bright {
        width: 61px;
        background-color: #f3f4f8;
        height: 126px;
        // border-radius: 19px;
        overflow: hidden;
        .my-slider {
          width: 61px;
          border-radius: 0;
          .van-slider__bar {
            background-image: linear-gradient(15deg, #dfcfd9, #cdcbd6);
          }
          .van-slider__button-wrapper {
            left: 0;
            right: 0;
            transform: none;
            width: 100%;
            .van-slider__button {
              width: 100%;
              border-radius: 19px;
              margin-top: -163px;
              opacity: 0;
              height: calc(163px * 2);
            }
          }
        }
      }
      .night {
        height: 37px;
        background-image: linear-gradient(#6a6a75, #82828e);
        color: #dfdfe3;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          display: block;
        }
      }
      .day {
        position: absolute;
        top: 15px;
        left: 0;
        right: 0;
        margin: auto;
        color: #202022;
        width: max-content;
        height: max-content;
        .iconfont {
          display: block;
        }
      }
    }

    .right {
      .progre {
        width: 257px;
        height: 76px;
        border-radius: 18px;
        background-color: #f3f4f8;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        .progre-bg {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 66%;
          background-color: #e8dee6;
          z-index: 0;
        }
        .prev {
          width: 40px;
          height: 76px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          z-index: 2;
          background-image: linear-gradient(
            90deg,
            rgba(207, 204, 214, 0.4),
            rgba(243, 244, 248, 0.1)
          );
        }
        .next {
          width: 40px;
          height: 76px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          z-index: 2;
          background-image: linear-gradient(
            90deg,
            rgba(243, 244, 248, 0.1),
            rgba(207, 204, 214, 0.4)
          );
        }
        .text {
          width: calc(100% - 80px);
          text-align: center;
          height: 76px;
          color: #242226;
          position: relative;
          z-index: 2;
          font-size: 13px;
          padding: 0 15px;
          box-sizing: border-box;

          .chapter-name {
            margin-top: 20px;
            line-height: 23px;
            height: 23px;
          }
          .percent {
            height: 20px;
          }
        }
      }

      .btns {
        margin-top: 19px;
        height: 68px;
        display: flex;
        justify-content: space-between;
        button {
          display: flex;
          padding: 0;
          border: 0;
          width: 58px;
          height: 68px;
          border-radius: 18px;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          &.more {
            .icon-xiaoxi {
              font-weight: bold;
            }
          }

          .name {
            margin-top: 6px;
            font-size: 12px;
          }
        }
      }
    }
  }
  ::v-deep .directoryMark {
    width: calc(100% - 60px);
    height: 100%;
    padding: 10px 18px;
    box-sizing: border-box;

    .title {
      display: flex;
      height: 42px;
      span {
        display: block;
        color: #acacb1;
        font-size: 15px;
        margin-right: 22px;
        height: 42px;
        line-height: 42px;
        &.con {
          color: #161620;
          font-weight: bold;
          font-size: 22px;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 12px;
            height: 2px;
            border-radius: 2px;
            background-color: #923e54;
          }
        }
      }
    }

    .status-chapter-type {
      display: flex;
      align-items: center;
      height: 50px;
      justify-content: space-between;
      margin-top: 6px;
      font-size: 12px;
      color: #40404c;
      .type {
        display: flex;
        align-items: center;
        .iconfont {
          font-size: 14px;
          margin-right: 3px;
        }
      }
    }

    .directoryList {
      position: absolute;
      top: 108px;
      bottom: 10px;
      left: 0;
      right: 0;
      overflow-y: scroll;
      overflow-x: hidden;
      padding: 0 18px 48px;

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #f0f0f0;
        color: #b7b7c2;

        &.seem {
          color: #666;
        }

        &.lock {
          color: #b7b7c2;
          .iconfont {
            visibility: visible;
          }
        }

        &.looking {
          color: #222;
          font-weight: bold;
          .van-icon-success {
            display: inline-block;
            color: #00bcd4;
          }
        }

        &.prev,
        &.next {
          .van-icon-success {
            display: inline-block;
            color: #00bcd4;
          }
        }

        &.downloaded {
          .van-icon-down {
            display: inline-block;
            color: #4caf50;
          }
        }

        &:last-child {
          border-bottom-width: 0;
        }

        &.con {
          color: #49495c;
        }

        .van-icon {
          display: none;
        }

        p {
          width: calc(100% - 42px);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 12px;
        }

        .iconfont {
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          visibility: hidden;
        }
      }
    }

    .markList {
      position: absolute;
      top: 60px;
      bottom: 10px;
      left: 0;
      right: 0;
      overflow-y: scroll;
      overflow-x: hidden;
      padding: 0 0 10px;

      .item {
        border-top: 2px solid #ffb0bc;
        border-bottom: 2px solid #ffb0bc;
        padding: 5px 10px 15px;
        border-left: 18px double #ffb0bc;
        border-right: 18px double #ffb0bc;
        transition: all 3s linear;
        border-radius: 26px;
        margin: 15px 10px 5px;

        &.random0 {
          border-color: #00bcd4;
        }

        &.random1 {
          border-color: #87e3cd;
        }

        &.random2 {
          border-color: #d1e6a6;
        }

        &.random3 {
          border-color: #ffde95;
        }

        &.random4 {
          border-color: #fc887b;
        }

        &.random5 {
          border-color: #cdaadb;
        }

        &.random6 {
          border-color: #ffb0bc;
        }

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 45px;
          .name {
            font-weight: bold;
            color: #333;
            font-size: 16px;
            margin-right: 2em;
          }
          .scrollRatio {
            font-size: 12px;
            color: #000;
          }
        }
        .keyword {
          color: #999;
          font-size: 14px;
        }
        .delete-button {
          height: 100%;
          background-color: #f24256;
          border-color: #f24256;
          border-radius: 5px;
          margin-left: 20px;
        }
      }
    }

    .download {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      color: #a6445b;
      background-color: #fff;
      padding: 0;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      box-shadow: 0px -3px 12px 1px rgb(0 0 0 / 10%);
    }
  }

  ::v-deep .adjust-pop {
    height: 227px;
    padding: 27px 19px 37px;
    box-sizing: border-box;
    overflow: hidden;
    .theme-list {
      height: 51px;
      display: flex;
      justify-content: space-between;

      .item {
        height: 51px;
        width: 58px;
        border-radius: 18px;
        overflow: hidden;
        font-size: 12px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        &.white {
          color: #3e3e4b;
          background-image: linear-gradient(#ebecf1, #f7f7f8);
          &.con {
            border: 2px solid rgb(195, 196, 201);
          }
        }
        &.yellow {
          color: #3e3e4b;
          background-image: linear-gradient(#e9cda1, #f8e9d0);
          &.con {
            border: 2px solid rgb(193, 165, 121);
          }
        }
        &.red {
          color: #3e3e4b;
          background-image: linear-gradient(#ffb0bc, #ffc5cc);
          &.con {
            border: 2px solid rgb(215, 136, 148);
          }
        }
        &.green {
          color: #3e3e4b;
          background-image: linear-gradient(#b0e6c0, #c3ebcf);
          &.con {
            border: 2px solid rgb(136, 190, 152);
          }
        }
        &.grey {
          color: #3e3e4b;
          background-image: linear-gradient(#84838e, #8d8d99);
          &.con {
            border: 2px solid rgb(93, 92, 114);
          }
        }
      }
    }
    .four-btns {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      height: 50px;
      .size,
      .line {
        width: 160px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        border-radius: 20px;
        overflow: hidden;
        button {
          width: 75px;
          height: 50px;
          border: 0;
          padding: 0;
          background-color: #eff1f5;
          color: #3c3a4a;
        }
      }
    }
    .two-options {
      margin-top: 12px;
      height: 41px;
      display: flex;
      justify-content: space-between;
      button {
        width: 160px;
        height: 41px;
        border-radius: 20px;
        font-size: 12px;
        border: 0;
        padding: 0;
        color: #3c3a4a;
        background-color: #eff1f5;
      }
    }
  }

  ::v-deep .info-funs {
    height: 431px;
    padding: 0 19px 36px;
    box-sizing: border-box;
    overflow: visible;

    .book-info {
      display: flex;
      align-items: center;
      height: 86px;
      .img {
        position: relative;
        width: 108px;
        height: 86px;
        .img-box {
          border-radius: 6px;
          overflow: hidden;
          padding: 6px;
          box-sizing: border-box;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 90px;
          background-color: #fff;
        }
      }
      .text {
        width: 148px;
        margin-right: 16px;
        .book-name {
          height: 29px;
          line-height: 29px;
          font-weight: bold;
          font-size: 18px;
          color: #302f41;
        }
        .name {
          height: 22px;
          line-height: 22px;
          color: #858492;
          font-size: 12px;
        }
      }
      .add-book button {
        padding: 0;
        border: 0;
        width: 65px;
        height: 27px;
        border-radius: 14px;
        background-color: #c0707d;
        font-size: 12px;
        color: #fff1f2;
        display: flex;
        justify-content: center;
        align-items: center;

        &.con {
          background-color: #00bcd4;
        }

        span {
          font-size: 16px;
          display: block;
          margin-right: 3px;
          height: 27px;
          line-height: 27px;
        }
      }
    }

    .btn-list {
      margin-top: 10px;
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 52px;
        border-top: 1px solid #f2f2f2;
        &:first-child {
          border-top-color: transparent;
        }
        .left {
          display: flex;
          align-items: center;
          .van-icon,
          .iconfont {
            width: 28px;
            display: block;
            font-size: 18px;
            color: #8d8c9d;
            margin-right: 9px;
            text-align: center;
            &.icon-bianji {
              font-weight: bold;
              font-size: 20px;
            }
            &.van-icon-label-o {
              font-weight: bold;
            }
            &.icon-24gl-playCircle {
              font-weight: bold;
            }
            &.icon-zhuanfa_4 {
              font-weight: bold;
            }
            &.icon-toupiao {
              font-weight: bold;
              font-size: 20px;
            }
            &.icon-sousuo {
              font-weight: bold;
            }
          }
          p {
            font-weight: bold;
            color: #58576a;
            font-size: 16px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          small {
            color: #afacba;
            font-size: 12px;
            margin-right: 9px;
            display: block;
          }
          .iconfont {
            width: 18px;
            font-size: 14px;
            color: #c9c9d3;
          }
          .van-switch {
            height: 26px;
            width: 64px;
            background-image: linear-gradient(90deg, #bcb9c5, #dcc1c8);
            &.van-switch--on {
              background-image: linear-gradient(
                90deg,
                rgb(138, 135, 147),
                rgb(170, 143, 150)
              );
            }
            .van-switch__node {
              width: 20px;
              height: 20px;
              margin-top: 3px;
              margin-left: 6px;
            }
          }
        }
      }
    }
  }

  ::v-deep .rote {
    padding: 15px 22px 0;
    width: 250px;

    h1 {
      color: #333;
      height: 38px;
      line-height: 38px;
      font-weight: bold;
    }

    .book-info {
      display: flex;
      margin-top: 10px;
      .left {
        width: 100px;
        height: 125px;
        margin-right: 15px;
        height: max-content;

        .img {
          padding: 5px;
          overflow: hidden;
          border-radius: 5px;
          box-shadow: 0 0 2px 1px rgba($color: #000000, $alpha: 0.1);
        }
      }

      .right {
        width: calc(100% - 115px);
        height: 125px;
        line-height: 20px;
        p {
          text-indent: 2em;
        }
      }
    }

    h2 {
      margin-top: 5px;
      line-height: 25px;
      span {
        color: #999;
        font-size: 12px;
      }
      border-bottom: 1px solid #f0f0f0;
    }

    .book-rote {
      padding-top: 5px;
      .item {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        p {
          margin-right: 1em;
          small {
            color: #999;
          }
        }
      }
      .some {
        margin-top: 10px;
        text-align: right;
        font-size: 12px;
        color: #999;
        span {
          text-decoration: underline;
        }
      }
    }

    .btn {
      display: flex;
      height: 45px;
      align-items: center;
      margin: 15px -22px 0;
      box-shadow: 0 0 1px 1px rgba($color: #000000, $alpha: 0.1);

      button {
        flex: 1;
        display: block;
        padding: 0;
        border: 0;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #f0f0f0;
        height: 100%;
        width: 100%;
        &.sub {
          border-right-width: 0;
          background-color: rgb(211, 49, 49);
          color: #fff;
          &.con {
            opacity: 0.7;
          }
        }
      }
    }
  }

  ::v-deep .van-dialog__content {
    max-height: calc(44px * 5) !important;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  ::v-deep .comment-pop {
    background-color: rgba(255, 255, 255, 0);
    width: 280px;
    .head {
      line-height: 22px;
      h1 {
        font-size: 16px;
        color: #fff;
      }
      p {
        color: #eee;
        display: flex;
        flex-direction: row-reverse;
      }
    }
    .body {
      margin-top: 20px;
      max-height: 250px;
      overflow-y: scroll;
      padding: 0 10px;
      .item {
        height: max-content;
        margin-top: 15px;
        width: 100%;

        &:first-child {
          margin-top: 0;
        }

        &.me {
          .name {
            color: #ff0 !important;
          }
        }

        .icon-name {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .box {
            display: flex;
            align-items: center;
          }
          .icon {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 5px;
          }
          .name {
            color: #fff;
            font-size: 12px;
          }

          .like {
            color: #fff;
            display: flex;
            align-items: center;
            &.liked {
              text-shadow: 0 0 10px #ff0;
              color: #ff0;
            }
            span {
              font-size: 12px;
            }
            .van-icon {
              margin-left: 4px;
              // color: #fff;
            }
          }
        }

        .text {
          margin-top: 5px;
          border-radius: 5px;
          background-color: #fff;
          padding: 5px;
          box-sizing: border-box;
          font-size: 14px;
          color: #333;
          height: max-content;
        }
      }
    }

    .foot {
      margin-top: 20px;
      .edit {
        display: flex;
        height: 28px;
        align-items: center;

        input {
          padding: 0;
          border: 0;
          outline: none;
          border-radius: 14px;
          height: 28px;
          margin-right: 10px;
          flex: 1;
          font-size: 12px;
          background-color: #fff;
          padding: 0 1em;
          color: #333;
          box-sizing: border-box;
        }

        button {
          padding: 0;
          border: 0;
          width: max-content;
          flex-shrink: 0;
          outline: none;
          font-size: 12px;
          height: 28px;
          background-color: #fff;
          border-radius: 14px;
          padding: 0 1em;
          color: #333;
          box-sizing: border-box;
          &.con {
            background-color: rgb(156, 232, 58);
            color: #fff;
          }
        }
      }
    }
  }

  .emtpy {
    text-align: center;
    color: #666;
    font-size: 14px;
    padding: 8px 24px 26px;
    p {
      line-height: 22px;
      small {
        text-decoration: underline;
      }
    }
  }
}
</style>